<template>
  <div class="main-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      @click="handelAddServe"
    >
      添加
    </el-button>
    <BaseTable :request="request" ref="baseTable">
      <el-table-column label="商标图片" prop="trademark_img">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="$store.getters.imgURL + scope.row.trademark_img"
            :preview-src-list="[
              $store.getters.imgURL + scope.row.trademark_img
            ]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商标名称" prop="title" />
      <el-table-column label="申请/注册号" prop="apply_code" />
      <el-table-column label="注册时间" prop="apply_time" />
      <el-table-column label="有效期至" prop="valid_time" />
      <el-table-column :label="$t('创建时间')" prop="create_time" />
      <el-table-column
        :label="$t('操作')"
        width="100px"
        align="right"
        fixed="right"
      >
        <template slot-scope="scope">
          <EditBtn @click="handelAddServe(scope.row)" />
          <DelBtn @success="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </BaseTable>
  </div>
</template>

<script>
import trademarkApi from '@/api/trademark'
export default {
  data() {
    return {
      request: trademarkApi.trademarkList
    }
  },

  methods: {
    handelAddServe(row = {}) {
      this.$router.push({
        name: 'addTrademark',
        query: {
          id: row.id
        }
      })
    },

    async handleDelete(row) {
      const res = await trademarkApi.deleteTrademark({ id: row.id })
      if (res.code == 0) {
        this.$refs.baseTable.getList('search')
        this.$message.success(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scope></style>
